<template>
  <div class="container">
    <div class="left-pane" @dragover.prevent>
      <draggable v-model="images" :options="dragOptions" class="image-list">
        <div v-for="(image, index) in images" :key="index" draggable @dragstart="dragStart(image, index)">
          <img class="img-str" :src="image.src" alt="Image" >
        </div>
      </draggable>
    </div>
    <div class="right-pane" @dragover.prevent @drop="dropHandler">
    <div v-for="(group, index) in imageGroups" :key="index">
      <div v-for="(image, imgIndex) in group" :key="imgIndex">
        <img :src="image.src" alt="Image" style="width: 100px; height: 100px;">
      </div>
      <hr>
    </div>
  </div>
  </div>
</template>

<script>
import draggable from 'vuedraggable';

export default {
  components: {
    draggable,
  },
  data() {
    return {
      images: [
      { id: 1, src: 'https://c.53326.com/d/file/newpc202302/b0ci1sfofpz.jpg' },
        { id: 2, src: 'https://c.53326.com/d/file/newpc202302/ehkmdl33jtq.jpg' },
        { id: 3, src: 'https://c.53326.com/d/file/newpc202302/erieljwp13b.jpg' },
        { id: 4, src: 'https://c.53326.com/d/file/newpc202302/rdja5dckqvw.jpg' },
        { id: 5, src: 'https://c.53326.com/d/file/newpc202302/fyhj0ibovbp.jpg' },
      ],
      dragOptions: {
        animation: 150,
      },
      draggedImage: null,
    };
  },
  methods: {
    dragStart(image, index) {
      // 开始拖拽图片时记录当前拖拽的图片
      this.draggedImage = { image, index };
    },
    dropHandler(event) {
      // 拖放到右侧区域时触发
      if (this.draggedImage) {
        // 获取被拖拽的图片数据
        const { image, index } = this.draggedImage;
        // 移除左侧的图片列表中的对应项
        this.images.splice(index, 1);
        // 执行右侧区域的处理逻辑，将拖拽的图片放到右侧区域
        this.handleDropOnRight(image);
        this.draggedImage = null; // 清空拖拽记录
      }
    },
    handleDropOnRight(image) {
  let placed = false;
  for (let i = 0; i < this.imageGroups.length; i++) {
    const group = this.imageGroups[i];
    if (group.length < 2 || group[group.length - 1].id !== image.id) {
      group.push(image);
      placed = true;
      break;
    }
  }
  if (!placed) {
    this.imageGroups.push([image]);
  }
},
  },
};
</script>

<style scoped>
.img-str{
  display: block;
  width: 200px;
  height: 100px;
}
.container {
  display: flex;
  height: 800px;
}

.left-pane {
  width: 400px;
  height: 100%;
  border: 1px solid #ccc;
}

.right-pane {
  width: 1000px;
  height: 100%;
  border: 1px solid #ccc;
}

.image-list {
  padding: 10px;
}

.image-list div {
  margin-bottom: 10px;
  cursor: move;
}
</style>